<template>
  <div class="resources" @mouseenter="isHover = true" @mouseleave="isHover = false" :style="{ background: modelValue?.bgColor || 'transparent' }">
    <div class="resources-wrapper">
      <div class="resources-content resources-row">
        <div class="resources-col-icon resources-col">
          <ul v-if="modelValue?.iconLinks && modelValue?.iconLinks.length > 0" class="resources-icon">
            <li v-for="(link, idx) in modelValue?.iconLinks" :key="idx">
              <IconLink
                :linkType="link.linkType"
                :iconType="link.iconType"
                :url="link.url"
                :text="link.text"
                :light="link.light"
                size="sm"
                @handleClick="handleClick"
              />
            </li>
          </ul>
        </div>

        <div v-if="modelValue?.textLinks && modelValue?.textLinks.length > 0" class="resources-col-text resources-col">
          <div class="resources-col-text-group">
            <ul
              v-for="(col, index) in sliceTextLinks"
              :key="index"
              class="resources-text"
            >
              <li v-for="(link, idx) in col" :key="idx">
                <a :href="link.url" class="resources-link resources-link-underline">{{ link.text }}</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="resources-col-contact resources-col">
          <div class="resources-contact">
            <div>
              <div v-if="showSubscribe" class="resources-contact-newsletter">
                <FooterSubscribe :footer="footer" @showLightboxSubscribe="showLightboxSubscribe" @showLightboxDonation="showLightboxDonation" isCampus class="resources-px-0 resources-pb-4 resources-pt-0" />
              </div>

              <div
                class="resources-d-flex resources-flex-column resources-flex-md-row resources-align-items-center resources-text-blue-dark resources-mb-3"
              >
                <h6 class="resources-footer-contact-title">{{ title }}</h6>
                <div v-if="subtitle" class="resources-footer-contact-subtitle resources-tx-body resources-ms-md-2">
                  {{ subtitle }}
                </div>
              </div>

              <div class="resources-contact-top">
                <div v-if="showQrcode" class="resources-contact-img resources-d-none resources-d-md-block">
                  <img :src="footerContact.qrcode" alt="qrcode" />
                </div>

                <ul class="resources-contact-links">
                  <li v-if="address && address.text">
                    <IconLink
                      linkType="outer-link"
                      iconType="pin"
                      :url="address.value"
                      :text="address.text"
                    />
                  </li>

                  <li v-if="phone && phone.numbers.length > 0">
                    <template v-for="(item, idx) in phone.numbers" :key="idx">
                      <span
                        v-if="phone.numbers.length > 0 && idx !== 0"
                        class="resources-link-caption resources-text-blue"
                        :key="`slash-${idx}`"
                        >&nbsp;/&nbsp;</span
                      >
                      <IconLink
                        linkType="outer-link"
                        class="resources-text-nowrap"
                        :iconType="idx == 0 ? 'phone' : null"
                        :url="`tel:${item.value}`"
                        :text="item.value"
                      />
                    </template>
                  </li>

                  <li v-if="fax && fax.value">
                    <IconLink
                      linkType="outer-link"
                      iconType="fax"
                      :url="`fax:${fax.value}`"
                      :text="fax.value"
                    />
                  </li>

                  <li v-if="email && email.value">
                    <IconLink
                      linkType="outer-link"
                      iconType="email"
                      :url="`mailto:${email.value}`"
                      :text="email.value"
                    />
                  </li>
                </ul>
              </div>

              <ul v-if="footerContact.links" class="resources-contact-bottom">
                <li v-for="(link, idx) in footerContact.links" :key="idx">
                  <IconLink
                    :key="`link-${idx}`"
                    :linkType="link.linkType"
                    :iconType="link.iconType"
                    :size="link.size"
                    :text="link.text"
                    :url="link.url"
                    :light="link.light"
                    @handleClick="handleClick"
                    @clickHandler="clickHandler"
                  />
                </li>
              </ul>
            </div>

            <div class="resources-d-md-none resources-ms-6">
              <div v-if="footerContact.qrcode" class="resources-contact-img">
                <img :src="footerContact.qrcode" alt="qrcode" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { randomString } from '@/utils/common'
import Setting from './setting.vue'
import Operate from '@/common/Operate/index.vue'
import IconLink from '@/common/IconLink/index.vue'
import FooterSubscribe from './FooterSubscribe.vue'

// 定义组件名称
defineOptions({
  name: 'Resources'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  isPreview: {
    type: Boolean,
    default: true
  },
  footer: { // TODO: 渲染端传入 footer
    type: Object,
    default: () => (
      // website === 'ycyw-90th' ? this.$store.state.menu.campusFooterInfo : this.$store.state.menu.footerInfo;
      {
        footer_logo: '/images/logo/joint-ywies-ycyw.svg',
        footer_logo_link: 'https://ycyw-edu.com/',
        footer_title: '共創人类美好未来',
        contact: {
          title: '耀华国际教育学校浙江桐乡校区',
          subtitle: null,
          qrcode: 'https://ywies-tx.cedim.cn/images/dummyimage/ywies-tx-wechat-qrcode.jpg',
          qrcode_title_img: '/images/icons/icon-wechat-full-sc.png',
          qrcode_text: '关注我们的微信公众号获取最新消息',
          address: {
            text: '中国浙江桐乡市高桥镇合悦大道88号（邮编： 314515）',
            value: 'https://map.baidu.com/poi/耀华国际教育学校(浙江桐乡校区)/@13422013.625963753,3551835.6050974904,16.95z?uid=248fa2a7a83ed6aac9e33c5b&querytype=detailConInfo'
          },
          phone: {
            prefix: '招生部热线:',
            numbers: [
              {
                text: '(0573) 8896 6605',
                value: '(0573) 8896 6605'
              },
              {
                text: '',
                value: ''
              }
            ]
          },
          fax: {
            text: null,
            value: null
          },
          email: {
            text: '电邮: enquiry.tx@ywies.com',
            value: 'enquiry.tx@ywies.com'
          },
          links: [
            {
              size: 'sm',
              iconType: '',
              text: '',
              linkType: '',
              url: ''
            }
          ]
        },
        logoText: '<p>耀华国际教育学校浙江桐乡校区是一所确保儿童安全的学校<br />\r\n点击 <a href="/sc/about-ywies/child-protection" target="_self">此处</a> 了解我们的《儿童保护规章和守则》</p>',
        copyright: '© 2022 浙江桐乡市耀华学校版权所有',
        cookie_text: '您继续访问本站即代表您同意我们的cookies政策。我们使用cookies来改善您在网站上的体验，并向您展示相关推广信息。如您想了解更多关于我们如何处理您的个人信息和使用cookies的信息，请阅读我们的隐私政策。',
        cookie_link_text: '了解更多',
        cookie_btn_text: '关闭',
        cookie_link_url: '/privacy-policy',
        links: [
          {
            key: 'sitemap',
            name: '网站地图',
            link: '/sitemap'
          },
          {
            key: 'legal-information',
            name: '法律信息',
            link: '/legal-information'
          },
          {
            key: 'privacy-policy',
            name: '隐私政策',
            link: '/privacy-policy'
          }
        ],
        sublinks: [
          {
            key: 'icp',
            name: '浙ICP备2022027407号',
            link: 'https://beian.miit.gov.cn/'
          },
          {
            key: 'icp2',
            name: '浙公网安备 33048302000288号',
            link: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33048302000288'
          }
        ],
        logos: [
          {
            key: 'cambridge-international',
            link: 'https://www.cambridgeinternational.org/',
            img: 'https://osswebsite-test.cedim.cn/shared/accreds/cambridge-assessment-international-education.png',
            alt: ''
          }
        ],
        footer_logo_alt: null
      }
    )
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste', 'showLightboxSubscribe', 'showLightboxDonation', 'handleClick', 'clickHandler'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'Resources',
    bgColor: '',
    iconLinks: [
      {
        id: randomString(),
        iconType: 'pdf',
        linkType: 'outer-link',
        text: '耀华国际教育学校',
        url: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/YWIES%20Tongxiang_2024-2025%20School%20Year%20Calendar.pdf',
      }
    ],
    textLinks: [
      {
        id: randomString(),
        text: '耀华国际教育学校',
        url: 'http://baidu.com',
      }
    ]
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()

const footerContact = computed(() => {
  return props.footer?.contact ?? null;
})
const title = computed(() => footerContact.value?.title ?? null);
const subtitle = computed(() => footerContact.value?.subtitle ?? null);
const address = computed(() => footerContact.value?.address ?? null);
const phone = computed(() => footerContact.value?.phone ?? null);
const fax = computed(() => footerContact.value?.fax ?? null);
const email = computed(() => footerContact.value?.email ?? null);

const showQrcode = computed(() => !!footerContact.value?.qrcode);
const showSubscribe = computed(() => !showQrcode.value && !footerContact.value?.disable_newsletter);

function splitChunk(arr = [], perChunk = 1) {
  return arr.reduce((resultArray: any[][], item, index) => {
    const chunkIndex = Math.floor(index / perChunk);
    if (!resultArray[chunkIndex]) resultArray[chunkIndex] = [];
    resultArray[chunkIndex].push(item);
    return resultArray;
  }, []);
}

const sliceTextLinks = computed(() => {
  const links = props.modelValue?.textLinks || []
  if (typeof window === 'undefined') return [links]
  const vsWidth = (window as any).$_vsWidth ?? window.innerWidth
  if (vsWidth >= 768) return [links]
  if (!links.length) return []
  const perChunk = Math.ceil(links.length / 2)
  return splitChunk(links, perChunk)
})

const showLightboxSubscribe = (data: any) => {
  emit('showLightboxSubscribe', data)
}

const showLightboxDonation = (data: any) => {
  emit('showLightboxDonation', data)
}

const handleClick = (url: string) => {
  emit('handleClick', url)
}

const clickHandler = () => {
  emit('clickHandler');
}
</script>

<style lang="scss" scoped>
.tx-h6,h6 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33
}

@media(max-width: 1023.98px) {
  .tx-h6,h6 {
    font-size:16px;
    line-height: 1.25;
    letter-spacing: .01em
  }
}

@media(max-width: 767.98px) {
  .tx-h6,h6 {
    line-height:1.5
  }
}

.resources {
  position: relative;
}
.resources-row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y)*-1);
  margin-right: calc(var(--bs-gutter-x)*-0.5);
  margin-left: calc(var(--bs-gutter-x)*-0.5);
}

.resources-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x)*0.5);
  padding-left: calc(var(--bs-gutter-x)*0.5);
  margin-top: var(--bs-gutter-y);
}

.resources-col {
  flex: 1 0 0%;
}

.resources-link,
.resources-link-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: #0048e8;
  color: var(--text-color, #0048e8);
}

.resources-link-caption:hover {
  color: #0048e8;
  color: var(--text-color, #0048e8);
}

.resources-link-underline {
  flex-direction: column;
}

.resources-link-underline::after {
  content: '';
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #0048e8;
  background-color: var(--text-color, #0048e8);
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

.resources-px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.resources-pb-4 {
  padding-bottom: 16px !important;
}

.resources-pt-0 {
  padding-top: 0 !important;
}

.resources-mb-3 {
  margin-bottom: 12px !important;
}

.resources-d-flex {
  display: flex !important;
}

.resources-flex-column {
  flex-direction: column !important;
}

.resources-flex-md-row {
  @media (min-width: 768px) {
    flex-direction: row !important;
  }
}

.resources-align-items-center {
  align-items: center !important;
}

.resources-text-blue-dark {
  --bs-text-opacity: 1;
  color: rgba(0, 50, 160, var(--bs-text-opacity)) !important;
}

.resources-tx-body-p {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.75;
}

@media (max-width: 1023.98px) {
  .resources-tx-body-p {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.resources-tx-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

@media (max-width: 1023.98px) {
  .resources-tx-body {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.01em;
  }
}

.resources-ms-md-2 {
  @media (min-width: 768px) {
    margin-left: 8px !important;
  }
}

.resources-d-none {
  display: none !important;
}

.resources-d-md-block {
  @media (min-width: 768px) {
    display: block !important;
  }
}

.resources-text-blue {
  --bs-text-opacity: 1;
  color: rgba(0, 72, 232, var(--bs-text-opacity)) !important;
}

.resources-text-nowrap {
  white-space: nowrap !important;
}

.resources-d-md-none {
  @media (min-width: 768px) {
    display: none !important;
  }
}

.resources-ms-6 {
  margin-left: 24px !important;
}

.resources-wrapper {
  @media (max-width: 767.98px) {
    padding-left: 0;
    padding-right: 0;
  }
}

.resources-content {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 0;

  @media (max-width: 767.98px) {
    flex-direction: column;
  }
}

.resources-content .resources-col {
  padding: var(--bs-gutter-x) calc(var(--bs-gutter-x) * 0.5) 0 calc(var(--bs-gutter-x) * 0.5);

  @media (max-width: 767.98px) {
    padding-top: 0;
  }
}

.resources-col-icon {
  @media (max-width: 767.98px) {
    order: 1;
  }
}

.resources-col-text {
  @media (max-width: 767.98px) {
    order: 3;
  }
}

.resources-col-text-group {
  display: flex;
  justify-content: space-between;
  padding: 40px 40px 24px;
  background: #F7F7FA;
  height: 100%;

  @media (max-width: 767.98px) {
    padding: 20px 36px 20px 12px;
  }
}

.resources-col-contact {
  @media (max-width: 767.98px) {
    order: 2;
  }
}

.resources-icon {
  height: 100%;
  padding: 40px 40px 24px;
  background: #F7F7FA;

  @media (max-width: 767.98px) {
    padding: 12px 14px;
  }
}

.resources-icon li:not(:first-child) {
  margin-top: 16px;

  @media (max-width: 767.98px) {
    margin-top: 12px;
  }
}

.resources-text li {
  display: flex;
}

.resources-text li:not(:first-child) {
  margin-top: 8px;

  @media (max-width: 767.98px) {
    margin-top: 2px;
  }
}

.resources-text li a {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.75;
}

@media (max-width: 1023.98px) {
  .resources-text li a {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.resources-contact {
  height: 100%;
  padding: 40px 40px 24px;
  background: #F7F7FA;

  @media (max-width: 767.98px) {
    padding: 24px;
    display: flex;
    align-items: flex-end;
  }
}

.resources-contact-top {
  display: flex;
  align-items: center;
}

.resources-contact-top > *:not(:first-child) {
  margin-left: 24px;

  @media (max-width: 767.98px) {
    margin-left: 0;
  }
}

.resources-contact-img {
  width: 86px;
  height: 86px;
  flex-shrink: 0;

  @media (max-width: 767.98px) {
    width: 74px;
    height: 74px;
  }
}

.resources-contact-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resources-contact-links li {
  display: flex;
  align-items: center;
}

.resources-contact-links li:not(:first-child) {
  margin-top: 12px;

  @media (max-width: 767.98px) {
    margin-top: 8px;
  }
}

.resources-contact-links ::v-deep .icon-link .icon-link__icon {
  width: 24px;
  height: 24px;
}

.resources-contact-bottom {
  display: flex;
}

.resources-contact-bottom:not(:first-child) {
  margin-top: 36px;

  @media (max-width: 767.98px) {
    margin-top: 12px;
  }
}

.resources-contact-bottom li:not(:first-child) {
  margin-left: 40px;

  @media (max-width: 1023.98px) {
    margin-left: 24px;
  }

  @media (max-width: 767.98px) {
    margin-left: 16px;
  }
}

.resources-contact-bottom ::v-deep .icon-link .icon-link__icon {
  width: 24px;
  height: 24px;
}

.resources-contact-newsletter {
  margin-bottom: 0;
}

.resources-footer-contact-title {
  margin-bottom: 0;
}

.resources-footer-contact-subtitle {
  margin-bottom: 0;
}
</style>